<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="bigdiv" @click="bigclick"><div class="smalldiv" @click.stop="smallclick"></div></div>
    <div class="huad">
        <ul :style="{marginLeft:maginleft+'px',width:widths+'px'}" :class="isshou?'guodu':''">
          <li class="li4" @touchstart='touchstartfun1' @touchmove='touchmovefun1'></li>
          <li class="li1" @touchstart='touchstartfun1' @touchmove='touchmovefun1' >1</li>
          <li class="li2" @touchstart='touchstartfun1' @touchmove='touchmovefun1' >2</li>
          <li class="li3" @touchstart='touchstartfun1' @touchmove='touchmovefun1' >3</li>
          <li class="li4" @touchstart='touchstartfun1' @touchmove='touchmovefun1' >4</li>
          <li class="li1" @touchstart='touchstartfun1' @touchmove='touchmovefun1' ></li>
        </ul>
    </div>
    <div class="hd" @touchstart='touchstartfun' @touchmove='touchmovefun'></div>
  </div>
</template>
<script>
export default {
  setup() {
    
  },
  data(){
    return{
      touchstartX:0,
      touchmoveX:0,
      maginleft:0,
      widths:0,
      index:1,
      isshou:true
    }
  },
  created(){

  },
  mounted(){
     this.$nextTick(() => {
       this.widths=(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)*6
       this.maginleft=-(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)
  })

  },
  methods:{
    bigclick(e){
      console.log('big',e)
    },
    smallclick(e){
      console.log('small',e)
    },
   touchstartfun(e){
    
    this.touchstartX=e.touches[0].clientX
    console.log(this.touchstartX)
   },
   touchmovefun(e){
    this.touchmoveX=e.touches[0].clientX
    console.log(e.touches[0].clientX)
    console.log('移动大小：',(this.touchstartX)-(e.touches[0].clientX))
    

   },
   

   touchstartfun1(e){
    
    this.touchstartX=e.touches[0].clientX
    console.log(this.touchstartX)
   },
   touchmovefun1(e){
    this.isshou=true
    if(this.touchstartX==this.shops){
      return
    }

    console.log('index',this.index)
    this.touchmoveX=e.touches[0].clientX
    let gudpc = this.touchmoveX-this.touchstartX
    
    console.log(e.touches[0].clientX)
    console.log('移动大小：',(this.touchstartX)-(e.touches[0].clientX))
    if( gudpc<-20 && this.index<5){
      this.index=this.index+1
      this.maginleft=-(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)*this.index
      
       
       this.shops=this.touchstartX
       
       if(this.index==5){
        const that=this

         setTimeout((function(){
          
          console.log('111')
          that.isshou=false
          that.index=1
          that.maginleft=-(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)
          console.log(that.index)
         }),300)
        
       }

    }
    if( gudpc>20 && this.index>=0){
    
      console.log(this.index)
      this.index=this.index-1
      this.maginleft=-(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)*this.index
      this.shops=this.touchstartX
       
       if(this.index<=0){
         const that=this
         console.log('判断',this.index)
         setTimeout((function(){
          
          console.log('111')
          that.isshou=false
          that.index=4
          that.maginleft=-(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)*that.index
          console.log(that.index)
         }),300)
         
       }

    }
    

   },
   watch:{
    //   widths:function(){//materielId为需要监听的data
    //         this.$nextTick(function(){
    //           console.log('wwww')
    //             return (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)*6
    //         });
    // }
   }
  }
}
</script>
<style>
.hd{
  width: 100%;
  height: 500px;
  background-color: rgba(95, 95, 95, 0.096);

}
.bigdiv{
  width: 200px;
  height: 200px;
  text-align: center;
  display: flex;
  align-items: center;
  background-color: antiquewhite;
}
.smalldiv{
  width: 100px;
  height: 100px;
  background-color: rgba(43, 32, 17, 0.123);
  margin: 0 auto;
}
.huad{
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.huad ul{
  width: auto;
  height: 200px;
  display: flex;
  
}
.huad ul li{
  width: 100%;
  height: 200px;
}
.li1{
  background-color: rgba(221, 96, 23, 0.37);
}
.li2{
  background-color: rgba(90, 43, 43, 0.178);
}
.li3{
  background-color: rgba(39, 146, 21, 0.178);
}
.li4{
  background-color: rgba(22, 75, 221, 0.356);
}
.guodu{
transition: all 0.3s;
}
</style>
